<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 第一：下载、导入 Vue 框架的 JS 文件 -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 第二：结构化页面，设置挂载点 -->
    <div id="app">
        <form action="http://www.baidu.com">
            爱好：
            <!-- 
                v-model绑定复选框，如果绑定多个相同属性值，则返回的是数组
            -->
            <input type="checkbox" id="eat" value="eat" v-model='hobby'>
            <label for="eat">吃</label>
    
            <input type="checkbox" id="drink" value="drink" v-model='hobby'>
            <label for="drink">喝</label>
    
            <input type="checkbox" id="play" value="play" v-model='hobby'>
            <label for="play">玩</label>
    
            <input type="checkbox" id="happy" value="happy" v-model='hobby'>
            <label for="happy">乐</label>
            <br/>

            <!-- prevent：阻止默认行为 -->
            <input type="submit" value="提交" @click.prevent='handle01'>
            <input type="submit" value="全选" @click.prevent='handle02'>
            <input type="submit" value="取消全选" @click.prevent='handle03'>
            <input type="checkbox" @change='handle04' v-model="selectAll">
          </form>
    </div>

    <script>
        // 第三：创建 Vue 实例 - 并设置相关的选项（属性）
        let vm = new Vue({
            // 1.绑定挂载点 - 绑定为 DOM 元素，设置 Vue 实例的挂载点
            el:'#app',

            // 2.定义数据
            data:{
                // 通过初始化复选框的 value 属性值，从而实现默认选择相关复选框；
                // 在此默认选择吃和玩。
                hobby: ['eat','play'],

                // 是否全选
                selectAll:false 
            },
            methods:{
                handle01() {
                    // 获取复选框中选中的值
                    console.log("爱好：" , this.hobby);
                    console.log("爱好：" , this.hobby.toString());
                },
                handle02() {
                    // 通过设置全部复选框的值，从而实现全选
                    this.hobby = ['eat','drink','play','happy']
                },
                handle03() {
                    // 通过设置空数组，从而实现取消全选
                    this.hobby = []
                },
                handle04() {
                    console.log(this.selectAll);

                    if(this.selectAll) {
                        this.hobby = ['eat','drink','play','happy']
                    } else {
                        this.hobby = []
                    }
                }
            }
        }) ;
    </script>
</body>
</html>